<html>

<head>
  <meta charset="gb2312" />
  <title>鼠标多选</title>
</head>

<style>
  body {
    padding: 100px;
  }

  .fileDiv {
    float: left;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 12px;
    border: 1px solid #ccc;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .seled {
    border: 1px solid red;
    background-color: #D6DFF7;
  }

  h3 {
    text-align: center;
    padding-bottom: 50px
  }
</style>

<script type="text/javascript">

  (function () {
    // 鼠标按下
    document.onmousedown = function () {
      var selList = [];
      var fileNodes = document.getElementsByTagName("div");
      for (var i = 0; i < fileNodes.length; i++) {
        if (fileNodes[i].className.indexOf("fileDiv") != -1) {
          fileNodes[i].className = "fileDiv";
          selList.push(fileNodes[i]);
        }
      }
      var isSelect = true;
      var evt = window.event || arguments[0];

      // 鼠标起始位置
      var startX = (evt.x || evt.clientX);
      var startY = (evt.y || evt.clientY);
      
      // 创建一个框选盒子
      var selDiv = document.createElement("div");
      selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
      selDiv.id = "selectDiv";
      document.body.appendChild(selDiv);

      // 对盒子进行定位
      selDiv.style.left = startX + "px";
      selDiv.style.top = startY + "px";

      // 定义鼠标移动到的坐标
      var _x = null;
      var _y = null;
      clearEventBubble(evt);


      // 鼠标移动
      document.onmousemove = function () {
        console.log('移动')
        evt = window.event || arguments[0];
        if (isSelect) {
          if (selDiv.style.display == "none") {
            selDiv.style.display = "";
          }

          _x = (evt.x || evt.clientX);
          _y = (evt.y || evt.clientY);
          selDiv.style.left = Math.min(_x, startX) + "px";
          selDiv.style.top = Math.min(_y, startY) + "px";
          selDiv.style.width = Math.abs(_x - startX) + "px";
          selDiv.style.height = Math.abs(_y - startY) + "px";

          var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
          var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;

          for (var i = 0; i < selList.length; i++) {
            var sl = selList[i].offsetWidth + selList[i].offsetLeft;
            var st = selList[i].offsetHeight + selList[i].offsetTop;
            if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
              if (selList[i].className.indexOf("seled") == -1) {
                selList[i].className = selList[i].className + " seled";
              }
            } else {
              if (selList[i].className.indexOf("seled") != -1) {
                selList[i].className = "fileDiv"; 
              }
            }
          }
        }
        clearEventBubble(evt);
      }

      // // 鼠标抬起
      document.onmouseup = function () {
        isSelect = false;
        if (selDiv) {
          document.body.removeChild(selDiv);
          showSelDiv(selList);
        }
        selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
      }
    }
  })();











  function clearEventBubble(evt) {
    if (evt.stopPropagation)
      evt.stopPropagation();
    else
      evt.cancelBubble = true;
    if (evt.preventDefault)
      evt.preventDefault();
    else
      evt.returnValue = false;
  }











  function showSelDiv(arr) {
    var count = 0;
    var selInfo = "";
    for (var i = 0; i < arr.length; i++) {
      if (arr[i].className.indexOf("seled") != -1) {
        count++;
        selInfo += arr[i].innerHTML + "\n";
      }
    }
    alert(count + "\n" + selInfo);
  }

</script>

<body>
  <div class="fileDiv">file1</div>
  <div class="fileDiv">file2</div>
  <div class="fileDiv">file3</div>
  <div class="fileDiv">file4</div>
  <div class="fileDiv">file5</div>
  <div class="fileDiv">file6</div>
  <div class="fileDiv">file7</div>
  <div class="fileDiv">file8</div>
  <div class="fileDiv">file9</div>
  <div class="fileDiv">file10</div>
  <div class="fileDiv">file11</div>
  <div class="fileDiv">file12</div>
  <div class="fileDiv">file13</div>
  <div class="fileDiv">file14</div>
  <div class="fileDiv">file15</div>
  <div class="fileDiv">file16</div>
  <div class="fileDiv">file17</div>
</body>

</html>